import React, { useState, useContext } from "react";

// useState 相当于pinia 状态管理 类似this.state

// useContext 实现跨组件层级的数据共享 相当于 $attrs 

import Image from "next/image";
import Link from "next/link";

import { AiFillLock, AiFillUnlock } from "react-icons/ai";

import { VotingContext } from "../../context/Voter";

import Style from "./NavBar.module.css";
import loading from "../../loading.gif";
// 定义 VotingContext 的数据类型
interface VotingContextType {
    connectWallet: () => Promise<void>;
    error: string;
    currentAccount: string | null;
}



const NavBar: React.FC = () => {
    const { connectWallet, error, currentAccount } = useContext(VotingContext) as VotingContextType

    // 状态类型自动推断为 boolean 
    const [openNav, setOpenNav] = useState(false);

    const openNaviagtion = (): void => {
        // if (openNav) {
        //     setOpenNav(false)
        // } else {
        //     setOpenNav(true);
        // }
        setOpenNav(!openNav); // 使用函数式更新更安全
    }
    return (
        <div className={Style.navbar}>
            {/* 错误消息显示 - 修正 className */}
            {error === "" ? (
                ""
            ) : (
                <div className={Style.message__Box}>
                    <div className={Style.message}>
                        <p>{error}</p>
                    </div>
                </div>
            )}
            <div className={Style.navbar_box}>
                {/* Logo区域 */}
                <div className={Style.title}>
                    <Link href={{ pathname: "/" }}> {/* 简化写法 */}
                        <Image src={loading} alt="logo" width={80} height={80} />
                    </Link>
                </div>
                {/* 钱包连接区域  */}
                <div className={Style.connect}>
                    {currentAccount ? (
                        <div>
                            <div
                                onClick={openNaviagtion} // 直接传递函数引用
                                className={Style.connect_flex}
                            >
                                <button>{currentAccount.slice(0, 10)}..</button>
                                <span>{openNav ? <AiFillUnlock /> : <AiFillLock />}</span>
                            </div>

                            {/* 菜单 */}
                            {openNav && (
                                <div className={Style.navigation} >
                                    <p>
                                        <Link href={{ pathname: "/" }}>Home</Link>
                                    </p>

                                    <p>
                                        <Link href={{ pathname: "candidate-regisration" }}>
                                            Candidate Registraction
                                        </Link>
                                    </p>
                                    <p>
                                        <Link href={{ pathname: "allowed-voters" }}>
                                            Voter Registraction
                                        </Link>
                                    </p>
                                    <p>
                                        <Link href={{ pathname: "voterList" }}>Voter List</Link>
                                    </p>
                                </div>
                            )}
                        </div>

                    ) : (
                        <button onClick={() => connectWallet()}>Connect Wallet</button>
                    )}
                </div>
            </div>
        </div>
    );
}

export default NavBar;